<template>
    <div class="add-plan-view">

      <el-form ref="form" :inline="true" :model="data" class="demo-form-inline" label-width="100px" size="medium" label-position="left" :rules="rules">
        <el-form-item label="工作内容" prop="work_content">
          <div class="textarea">
            <el-input
              v-model="data.work_content"
              placeholder="请输入工作内容"
              type="textarea"
              :rows="2">
            </el-input>
          </div>

        </el-form-item>
        <el-form-item label="开始日期" prop="startTime">
          <el-date-picker
            @change="startChange"
            v-model="data.startTime"
            type="date"
            :editable="false"
            :clearable="false"
            placeholder="请选择开始日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endTime">
          <el-date-picker
            @change="endChange"
            v-model="data.endTime"
            type="date"
            :editable="false"
            :clearable="false"
            placeholder="请选择结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="执行人" prop="executor_id">
          <el-select v-model="data.executor_id" placeholder="请选择执行人" @change="peopleChange">
            <el-option
              v-for="item in members"
              :key="item.member_id"
              :label="item.member_name"
              :value="item.member_id">
            </el-option>
          </el-select>
        </el-form-item>

<!--        <el-form-item label="项目信息">-->
<!--          <el-input v-model="data.project_message"></el-input>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="任务信息">-->
<!--          <el-input v-model="data.task_message"></el-input>-->
<!--        </el-form-item>-->

      </el-form>

    </div>
</template>

<script>
    export default {
        name: "addPlanView",
        props:{
            data:{
                type:Object,
                default:function () {
                    return{

                    }
                }
            },
            members:Array
        },
        data:function () {
            return{
                pickerOptions: {
                    disabledDate:time=> {
                        if (time.toLocaleDateString() == new Date().toLocaleDateString()){
                            return false
                        }
                        return time.getTime() < new Date().getTime();

                    }
                },
                rules: {
                    work_content: [
                        { required: true, message: '请输入工作内容', trigger: 'blur' }
                    ],
                    startTime: [
                        { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }
                    ],
                    endTime: [
                        { type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }
                    ],
                    executor_id: [
                        { required: true, message: '请选择执行人', trigger: 'change' }
                    ],
                },
            }
        },
        methods:{
            startChange:function () {
                if (this.data.endTime){
                    if (this.data.startTime.getTime() > this.data.endTime.getTime()){
                        this.data.endTime = "";
                        this.$message.error("结束时间不能早于开始时间")
                    }
                }
            },
            endChange:function () {
                if (this.data.startTime){
                    if (this.data.startTime.getTime() > this.data.endTime.getTime()){
                        this.data.endTime = "";
                        this.$message.error("结束时间不能早于开始时间")
                    }
                }
            },
            peopleChange:function (id) {
                let index = this.members.findIndex(a=>a.member_id == id)
                if (index != -1){
                    let pel = this.members[index];
                    this.data.executor_id = pel.member_id;
                    this.data.executor = pel.member_name;
                }
            },
            formValidate:function () {
                return this.$refs.form.validate()
            }
        }
    }
</script>

<style lang="scss">
  @import "@/assets/scss/views/projectManagement/list/details/addPlanView.scss";
</style>
